<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <link rel="stylesheet" href="http://static4.weidai.com.cn/static/common/weiApp/pioneerH5/lib/css/normalize.css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
    <script src="DatePicker.js"></script>
    <style>
        .datapicker {
            width: 696px;
            height: 318px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        .datapicker .weidai-datepicker-week,
        .datapicker .weidai-datepicker-day {
            width: 600px;
            margin-top: 13px;
            margin-left: 50px;
            zoom: 1;
            display: block;
        }

        .datapicker .weidai-datepicker-day {
            margin-top: 23px;
        }

        .datapicker .weidai-datepicker-week:after,
        .datapicker .weidai-datepicker-day:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .datapicker .weidai-datepicker-week span {
            color: #bdbdbd;
            width: 31px;
            height: 31px;
            margin-left: 45px;
            display: block;
            float: left;
            text-align: center;
            line-height: 31px;
            position: relative;
            font-size: 14px;
        }

        .datapicker .weidai-datepicker-day span {
            width: 31px;
            height: 31px;
            margin-left: 45px;
            display: block;
            float: left;
            text-align: center;
            line-height: 31px;
            margin-bottom: 15px;
            font-size: 14px;
            position: relative;
            border-radius: 50%;
            background-color: #fff;
            transition: all .3s ease 0s;
        }

        .datapicker .weidai-datepicker-day span.specialMonth {
            margin-bottom: 8px;
        }

        .datapicker .weidai-datepicker-day span a {
            color: #9e9e9e;
            text-decoration: none;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: all .3s ease 0s;
        }

        .datapicker .weidai-datepicker-day span i {
            transition: all .3s ease 0s;
            width: 0;
            height: 0;
            background-color: #269aeb;
            border-radius: 10px;
            display: inherit;
            position: absolute;
            bottom: 2;
            left: 16px;
        }

        .datapicker .weidai-datepicker-day span.today {
            background-color: #269aeb;
            color: #fff;
        }

        .datapicker .weidai-datepicker-day span.today a {
            color: #fff;
        }

        .datapicker .weidai-datepicker-day span.hasdata {
            cursor: pointer;
        }

        .datapicker .weidai-datepicker-day span.hasdata:not(.today) a {
            transition: all .3s ease 0s;
            color: #269aeb;
        }

        .datapicker .weidai-datepicker-day span.hasdata i {
            width: 5px;
            height: 5px;
            left: 13px;
            bottom: 0;
            transition: all .3s ease 0s;
        }

        .datapicker .weidai-datepicker-day span.hasdata:hover a {
            color: #fff;
        }

        .datapicker .weidai-datepicker-day span.hasdata:hover i {
            width: 100%;
            height: 100%;
            left: 0;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="datapicker" id="datapicker"></div>

    <div style="text-align:center; margin-top:20px;">
        <a href="javascript:datapicker.toPrevMonth()">上个月</a>
        <a href="javascript:datapicker.toNextMonth()">下个月</a>
    </div>
    <div style="text-align:center; margin-top:20px;">
        年:
        <select class=" " name="" id="selectYear">
            <option value="2000">2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
            <option value="2005">2005</option>
        </select>
        月:
        <select class=" " name="" id="selectMonth">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>

    <script>
        //示例代码

        var data = [
          {day: 2, data:''},
          {day: 6, data:''},
          {day: 15, data:''},
          {day: 18, data:''},
          {day: 28, data:''}
        ]

        var datapicker = new DatePicker('datapicker', data, function(year, month, render) {
            console.log(year);
            console.log(month);

            //根据 年，月 发送请求获取数据，然后执行 render.call(this, year, month, newData);
            // $.ajax({
            //     type: "POST",
            //     url: url,
            //     data: {
            //         year: year,
            //         month: month
            //     },
            //     dataType: "json",
            //     success: function(data) {
            //
                  //假设数据为 newData
                  // var newData = [
                  //   {day: 2},
                  //   {day: 6},
                  //   {day: 10},
                  //   {day: 15},
                  //   {day: 18},
                  //   {day: 28}
                  // ]
            //
            //       render.call(this, year, month, newData);
            //     },
            //     error: function(data) {
            //         console.info('error');
            //         console.info(data);
            //     }
            // })

            var newData = [
              {day: 2},
              {day: 6},
              {day: 10},
              {day: 15},
              {day: 18},
              {day: 28}
            ]

            render.call(this, year, month, newData);
        });



        //onchange
        $('#selectYear').on('change',selectChange);
        $('#selectMonth').on('change',selectChange);

        function selectChange(){
          var year = $('#selectYear').val();
          var month = $('#selectMonth').val();
          datapicker.toNewYearAndMonth(year, month);
        }
    </script>
</body>

</html>
